<template>
  <transition>
  <div class="store-role-list">
    <section class="app-main">
      <div class="module-action">
        <mt-button type="danger" @click="handleAdd">新增角色</mt-button>
      </div>
      <mt-cell v-for="(item,index) in roleList" class="staff-details" :title="item.name" :label="item.remark">
        <span class="iconfont icon-bianji" @click="handleEdit(item)"></span>
        <span class="iconfont icon-shanchu" @click="handleRemove(item)"></span>
      </mt-cell>
      <!--<mt-cell class="staff-details" title="玻璃工" label="负责汽车玻璃的安装、维修">-->
        <!--<span class="iconfont icon-bianji"></span>-->
        <!--<span class="iconfont icon-shanchu"></span>-->
      <!--</mt-cell>-->
    </section>

    <!--地图弹窗-->
    <mt-popup
      v-model="popupRole"
      position="right" class="popup-role">
      <ul class="module-role">
        <li class="item item-header">
          <span class="addon">基础设置</span>
        </li>
        <li class="item">
          <mt-field label="角色名称" placeholder="请输入角色名称" v-model="form.name"></mt-field>
        </li>
        <li class="item">
          <mt-field label="角色说明" placeholder="请输入角色说明" v-model="form.remark"></mt-field>
        </li>
        <li class="item item-header">
          <span class="addon">数据权限</span>
          <mt-checklist
            title=""
            v-model="selectPower"
            :options="optionsSelectPower">
          </mt-checklist>
        </li>
      </ul>
      <div class="button-content">
        <div class="button-block-6">
          <mt-button type="default" @click="popupRole = false">取消</mt-button>
        </div>
        <div class="button-block-6">
          <mt-button type="danger" @click="handleConfirm">确定</mt-button>
        </div>
      </div>
    </mt-popup>
    <!--地图弹窗-->
  </div>
    </transition>
</template>

<script>
  import { Header,Cell,MessageBox,Toast} from 'mint-ui';

//  Vue.component(Header.name, Header);
export default {
  components:{
    Header,
    Cell,
  },
  data () {
    return {
      userImg:'./static/img/user-none.jpg',
      popupRole:false,
      isAddPopup:true,
      selectPower:[],
      roleList:[],
      permissionList:[],
      optionsSelectPower:[],
      form:{
        name:'',
        remark:'',
        id:'',
      }
    }
  },

  mounted(){

    this.getData();
  },
  methods:{
    getData() {
      //获取角色数据
      var params = new URLSearchParams();
      this.$axios({
        method: 'post',
        url:'gp/app/users/getUserRoleList',
        data:params
      }).then((res)=>{
        console.log(res.data.object)
      this.roleList=res.data.object;
    });
      //获取权限列表
      var params = new URLSearchParams();
      this.$axios({
        method: 'post',
        url:'gp/app/users/getUserPermission',
        data:params
      }).then((res)=>{
        this.permissionList=res.data.object;
        console.log(res)
      this.optionsSelectPower=[];
      for(var i=0;i<res.data.object.length;i++){
        const item={
          label:res.data.object[i].remark,
          value:res.data.object[i].id,
        }
        this.optionsSelectPower.push(item);
      }
    });

    },
    handleAdd(){
      this.form={
        name:'',
          remark:'',
        id:'',
      };
      this.isAddPopup=true;
      this.selectPower=[];
      this.popupRole=true;
    },
    handleEdit(item){
      this.form={
        name:item.name,
        remark:item.remark,
        id:item.id,
      };
      this.isAddPopup=false;
      this.selectPower=item.permList;

      this.popupRole=true;

    },
    handleRemove(item){
      MessageBox({
        title: '',
        message: '确认是否删除?',
        showCancelButton: true
      }).then(action => {
        if(action=='confirm'){
        var params = new URLSearchParams();
        params.append('id',item.id);
        this.$axios({
          method: 'post',
          url:'gp/app/users/deleteUserRole',
          data:params
        }).then((res)=>{
          if(res.data.statusCode==200){
          Toast({
            message: res.data.message,
            position: 'middle',
            duration: 1500
          });
          this.getData();
        }else{
          Toast({
            message: res.data.message,
            position: 'middle',
            duration: 1500
          });
        }
      })
      };
    })
    },
    handleConfirm(){

      if(this.form.name==''){
        Toast({
          message: '请输入角色名称',
          position: 'middle',
          duration:1000
        });
        return false;
      };
      if(this.selectPower.length<=0){
        Toast({
          message: '请选择权限',
          position: 'middle',
          duration:1000
        });
        return false;
      };

      if(this.isAddPopup==true){
        //新增角色
        var params = new URLSearchParams();
        params.append('name', this.form.name);
        params.append('remark', this.form.remark);
        params.append('selectedItem', this.selectPower);
        this.$axios({
          method: 'post',
          url:'gp/app/users/addUserRole',
          data:params
        }).then((res)=>{

          if(res.data.statusCode==200){
          Toast({
            message: res.data.message,
            position: 'middle',
            duration: 1500
          });
          this.popupRole=false;
          this.getData();
        }else{
          Toast({
            message: res.data.message,
            position: 'middle',
            duration: 1500
          });
          this.getData();
        }
      });
      }else{
        //新增角色
        var params = new URLSearchParams();
        params.append('name', this.form.name);
        params.append('remark', this.form.remark);
        params.append('id', this.form.id);
        params.append('selectedItem', this.selectPower);
        this.$axios({
          method: 'post',
          url:'gp/app/users/updateUserRolePermission',
          data:params
        }).then((res)=>{

          if(res.data.statusCode==200){
          Toast({
            message: res.data.message,
            position: 'middle',
            duration: 1500
          });
          this.popupRole=false;
          this.getData();
        }else{
          Toast({
            message: res.data.message,
            position: 'middle',
            duration: 1500
          });
          this.getData();
        }
      });
      }

    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style>
  .store-role-list .member-header {
    background: #fff;
    position: relative;
    margin: 0 0 12px;
    padding:12px; }
  .store-role-list .member-header .store-code{
    position: absolute;
    top:50%;
    right:16px;
    font-size:28px ;
    color: #c34853;
    font-weight: bold;
    transform: translate(0,-50%);
  }
  .store-role-list .user-img {
    display: inline-block;
    vertical-align: middle; }
  .store-role-list .user-img img {
    width:70px;
    height:70px; }
  .store-role-list .user-info {
    display: inline-block;
    vertical-align: middle;
    padding-left:8px; }
  .store-role-list .user-title {
    display: block;
    margin: 0 0 2px;
    font-size:16px;
    color: #000; }
  .store-role-list .user-mendian {
    display: block;
    font-size:14px;
    color: #888; }
  .store-role-list .staff-details{
    margin:0 0 10px;
    padding:6px 0 6px 54px;
    position: relative;
    padding-left: 0;
  }
  .store-role-list .staff-details .mint-cell-left{
    transform:translate3d(0,0,0);
    top: 0;
    bottom: 0;
  }

  .store-role-list .module-action{
    background: #fff;
    padding:14px;
    margin:0 0 12px;
    /*text-align: right;*/
  }
  .store-role-list .module-action .mint-button{
    padding:0 16px;
    font-size: 15px;
  }
  .store-role-list .popup-role{
    background: #fff;
    height: 100%;
    width:90%;
  }

  .store-role-list .module-role .addon{
    display: block;
    padding:12px 12px 0;
    /*border-bottom:1px solid #ddd;*/
  }
  .store-role-list .module-role .addon:before{
    background:#c34853;
    position: relative;
    top:-2px;
    display:inline-block;
    vertical-align: middle;
    width:4px;
    height:16px;
    content: '';
    margin-right:5px;
  }
  .store-role-list .button-content{
    padding:16px 16px 12px;
    font-size:0;
  }
  .store-role-list .button-block-6{
    display: inline-block;
    width: 50%;
    padding:0 10px;
  }
  .store-role-list .button-block-6 .mint-button{
    display: block;
    width: 100%;
    font-size: 15px;
  }
  .store-role-list .staff-details .mint-cell-value{
    padding-left: 8px;
  }
  .store-role-list .staff-details .icon-bianji{
    font-size: 20px;
    padding:4px;
  }
  .store-role-list .staff-details .icon-shanchu{
    font-size: 24px;
    padding:4px;
    color: #999;
  }
  .store-role-list .staff-details .mint-cell-wrapper{
    background: none;
  }
  .mint-toast{
    z-index:10000;
  }
</style>
